<template>
<view class="container">
  <mvBar :mysNavConfig="mysNavConfig"></mvBar>
  <view class="info">
    <view class="success-icon">
      <uni-icons type="checkmarkempty" size="42" color="#FFFFFF"></uni-icons>
    </view>
    <view class="content">提交成功</view>
    <view class="sub text-gray">开具的电子发票可在开票历史中查看</view>
    <view class="btns">
      <view class="btn text-gray" @click="go('index')">返回首页</view>
      <view class="btn primary-btn" @click="go('history')">开票历史</view>
    </view>
  </view>
</view>
</template>

<script>

import mvBar from "@/components/mysNavBar.vue";
export default {
  name: "index",
  components: {mvBar},
  data(){
    return{
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        bgColor:'#FFFFFF',
        navTitle: {
          text: "开票成功",
          color: "#1B1B1B",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: '/static/header/back-b.png'
      },
    }
  },
  methods:{
    go(page){
      if (page === 'index'){
        uni.switchTab({url: '/pages/index/index'})
      }else {
        uni.navigateTo({url: '/pages/personal-center/invoice/history'})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  color: #1B1B1B;
  .mt-20{
    margin-top: 20upx;
  }
  .flex-between{
    display: flex;
    justify-content: center;
  }
  .text-gray{
    color: #9D9D9D;
  }
  .info{
    margin: auto;
    text-align: center;
    padding-top: 120upx;
    .content{
      font-size: 36upx;
      font-weight: 700;
      margin-top: 48upx;
      margin-bottom: 48upx;
    }
    .sub{
      font-size: 24upx;
    }
    .btns{
      margin: 160upx auto 0;
      width: 550upx;
      display: flex;
      justify-content: space-between;
      .btn{
        width: 260upx;
        line-height: 80upx;
        text-align: center;
        color: #1B1B1B;
        border-radius: 40upx;
        background: #FFFFFF;
      }
      .primary-btn{
        background: #006241;
        color: #FFFFFF;
      }
    }
    .success-icon{
      margin: auto;
      width: 120upx;
      height: 120upx;
      background: #006241;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>